<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>eleRotate-Test</title>
    <style>
        body {
            margin: 0px;
            background-color: aquamarine;
        }

        .rotate {
            position: relative;
            margin: 50px auto;
            width: 200px;
            height: 200px;
            background-color: rgb(54, 54, 54);
        }

        .btn_rotate {
            position: relative;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 50px;
        }
    </style>
</head>

<body>
    <!-- 点击旋转动画 -->
    <div class="rotate"></div>
    <button class="btn_rotate">点击旋转</button>



    <script type="text/javascript" src="../src/tatu.js"></script>
    <script>
        const rotate = document.querySelector('.rotate');
        const btnRotate = document.querySelector('.btn_rotate');
        let flag = true;

        /*  eleRotate(): 旋转动画---参数说明:
            参数一: htmlElement: 需要操作的html元素
            参数二: start: 初始位置，一般值为0，类型number
            参数三: end: 需要旋转的角度，类型number
            参数四: duration: 完成时间（ms），一般大于等于1000ms，类型number
            参数五: direction: 旋转轴方向，值为'x' 或者 'y' 或者 'z'，类型string
            参数六: timing: 运动曲线，值为'linear'线性，或者 'ease'渐慢，类型string
            参数七: step: 步数间隔，最小值为1，类型number，此为1时，运动曲线为linear
            参数八: callback: 可选，动画完成后的回调函数
        */

        btnRotate.addEventListener('click', () => {
            if (flag) {
                flag = false;
                eleRotate(rotate, 0, 90, 200, 'z', 'ease', 2, () => {
                    setTimeout(() => {
                        eleRotate(rotate, 90, 0, 200, 'z', 'ease', 2, () => {
                            console.log('ok');
                            flag = true;
                        })
                    }, 500);
                });
            }
        });
    </script>
</body>

</html>